<main id="contractCustom">
  <div class="mlr-24">
    <hl-page-header title="系统配置-招商配置-自定义字段"></hl-page-header>
    <div class="body" style="margin-top: 20px">
      <!-- 内置字段 -->
      <div class="font-16 ptb-10 color-gray mt-15">内置字段</div>
      <div class="cost-list js-operation text-center line-height-45 br-4 global_table"
        style="border:1px solid #E5E5E5;"  ref="offsetTopBox1">
        <div class="dy-flex color-666 font-nm color-gray border-b global_table_title" style="margin:0">
          <div class="dy-fx-4 plr-2">自定义名称</div>
          <div class="dy-fx-2 plr-2">类型</div>
          <div class="dy-fx-4 plr-2" style="align-items: center;overflow: visible" >取值范围</div>
          <div class="dy-fx-2 plr-2">是否必填</div>
          <div class="dy-fx-2 plr-2">是否关联模板</div>
          <div class="dy-fx-3 plr-2">模板类型</div>
          <div class="dy-fx-2 plr-2">主键ID</div>
        </div>
        <div class="cost-content js-edit css-overflow">
          <div class="dy-flex cost-list-item global_table_item" v-for="(item, index) in data1" >
            <div class="dy-fx-4 plr-2 ellipsis-1">{{item.dictName}}</div>
            <div class="dy-fx-2 plr-2">{{typeText(item.fieldType)}}</div>
            <div class="dy-fx-4 plr-2 ellipsis-1">
              <span class="ellipsis-2" @mouseenter="showHover(item.fieldRange,index,'N',$event)"
                @mouseleave="texthover = false">{{item.fieldRange}}</span>
            </div>
            <div class="dy-fx-2 plr-2">{{item.isRequired == 'true'?'是':'否'}}</div>
            <div class="dy-fx-2 plr-2">{{item.templateFlag == 'true'?'是':'否'}}</div>
            <div class="dy-fx-3 plr-2">{{templateTyle(item.templateTypes)}}</div>
            <div class="dy-fx-2 plr-2 ellipsis-1" :title="item.template_key">{{item.templateKey || '--'}}</div>
          </div>
        </div>
      </div>
      <!-- 自定义字段 -->
      <div class="font-16 ptb-10 color-gray mt-15">自定义字段</div>
      <div class="cost-list js-operation text-center line-height-45 br-4 global_table"
        style="border:1px solid #E5E5E5;" ref="offsetTopBox2">
        <div class="dy-flex color-666 font-nm color-gray border-b global_table_title" style="margin:0">
          <div class="dy-fx-4 plr-2">自定义名称</div>
          <div class="dy-fx-2 plr-2">类型</div>
          <div class="dy-fx-4 plr-2" style="align-items: center;overflow: visible">取值范围
            <div style="margin-left: 5px;cursor: pointer;" class="iconHover">
              <span class="icon-Gm-explain"></span>
              <div class="hoverText">
                <div></div>
                <ul class="instro">项目的取值内容说明，如有多个，以“，”分隔。</ul>
              </div>
            </div>
          </div>
          <div class="dy-fx-2 plr-2">是否必填</div>
          <div class="dy-fx-2 plr-2">是否关联模板</div>
          <div class="dy-fx-3 plr-2">模板类型</div>
          <div class="dy-fx-2 plr-2">主键ID</div>
          <div class="dy-fx-1 plr-2">状态</div>
          <div class="dy-fx-2 plr-2  border-l">操作</div>
        </div>
        <div class="cost-content js-edit css-overflow">
          <div class="dy-flex cost-list-item global_table_item" v-for="(item, index) in data">
            <div class="dy-fx-4 plr-2 ellipsis-1">
              <span v-if="!item.isInput_name">{{item.dict_name}}</span>
              <span v-if="!item.isInput_name" class="icon-Gm-edit"
                @click="item.isInput_name = true,item.dict_name_copy = item.dict_name"></span>
              <input v-if="item.isInput_name" type="text" class="form-control inline ml-5 mr-5 text-center"
                style="width: 120px;" v-model="item.dict_name_copy">
              <span v-if="item.isInput_name" class="icon-Gm-confirm" @click="checkItem(item,'edit')"></span>
              <span v-if="item.isInput_name" class="icon-Gm-delete-2" @click="item.isInput_name = false"></span>
            </div>
            <div class="dy-fx-2 plr-2">
              <span></span>
              <hl-select :data="LXdata" v-model="item.field_type" type="primary" width=""
                @on-change="item.field_range = '',item.field_range_copy = '',item.isInput_range = true"></hl-select>
            </div>
            <div class="dy-fx-4 plr-2 ellipsis-1">
              <div v-if="item.field_type != 'date'"
                style="display: flex;align-items: center;justify-content: center;height: 100%;">
                <span v-if="!item.isInput_range" class="ellipsis-2" style="margin-right: 10px"
                  @mouseenter="showHover(item.field_range,index,'Z',$event)"
                  @mouseleave="texthover = false">{{item.field_range}}</span>
                <span v-if="!item.isInput_range" class="icon-Gm-edit"
                  @click="item.isInput_range = true,item.field_range_copy = item.field_range"></span>
                <input v-if="item.isInput_range" type="text" class="form-control inline ml-5 mr-5 text-center"
                  style="width: 120px;" v-model="item.field_range_copy">
                <span v-if="item.isInput_range" class="icon-Gm-confirm" @click="checkItem(item,'edit')"></span>
                <span v-if="item.isInput_range" class="icon-Gm-delete-2" @click="item.isInput_range = false"
                  style="margin-left: 5px;"></span>
              </div>
              <div v-if="item.field_type == 'date'">--</div>
            </div>
            <div class="dy-fx-2 plr-2">
              <hl-select :data="isWhether" v-model="item.is_required" type="primary" width=""
                @on-change="checkItem(item,'edit')"></hl-select>
            </div>
            <div class="dy-fx-2 plr-2">
              <hl-select :data="isWhether" v-model="item.template_flag" type="primary" width=""
                @on-change="checkItem(item,'edit')"></hl-select>
            </div>
            <div class="dy-fx-3 plr-2">
              <hl-select :data="templateList.systemColumns" v-model="item.template_types" type="primary" width=""
                :multiple="true" @on-change="checkItem(item,'edit')" v-if="item.template_flag + '' == 'true'"></hl-select>
                <div v-if="item.template_flag + '' == 'false'">--</div>
            </div>
            <div class="dy-fx-2 plr-2 ellipsis-1" :title="item.template_key">{{item.template_key || '--'}}</div>
            <div class="dy-fx-1 plr-2 ellipsis-1">{{item.isValid == 'true'?'启用':'停用'}}</div>
            <div class="dy-fx-2 cost-css-w-2 plr-2 border-l">
              <a @click="disableItem(item)">{{item.isValid == 'true'?'停用':'启用'}}</a>
              <a @click="delItem(item.configCode)">删除</a>
            </div>
          </div>
          <!-- //添加一行 -->
          <div class="dy-flex cost-list-item global_table_item" v-if="isAddFlag" v-for="item in addItem">
            <div class="dy-fx-4 plr-2 ellipsis-1">
              <span v-if="!item.isInput_name">{{item.dict_name}}</span>
              <span v-if="!item.isInput_name" class="icon-Gm-edit"
                @click="item.isInput_name = true,item.dict_name_copy = item.dict_name"></span>
              <input v-if="item.isInput_name" type="text" class="form-control inline ml-5 mr-5 text-center"
                style="width: 120px;" v-model="item.dict_name_copy">
              <span v-if="item.isInput_name" class="icon-Gm-confirm" @click="checkItem(item,'add')"></span>
              <span v-if="item.isInput_name" class="icon-Gm-delete-2" @click="item.isInput_name = false"></span>
            </div>
            <div class="dy-fx-2 plr-2">
              <hl-select :data="LXdata" v-model="item.field_type" type="primary" width=""></hl-select>
            </div>
            <div class="dy-fx-4 plr-2 ellipsis-1">
              <div v-if="item.field_type != 'date'">
                <span v-if="!item.isInput_range">{{item.field_range}}</span>
                <span v-if="!item.isInput_range" class="icon-Gm-edit"
                  @click="item.isInput_range = true,item.field_range_copy = item.field_range"></span>
                <input v-if="item.isInput_range" type="text" class="form-control inline ml-5 mr-5 text-center"
                  style="width: 120px;" v-model="item.field_range_copy">
                <span v-if="item.isInput_range" class="icon-Gm-confirm" @click="checkItem(item,'add')"></span>
                <span v-if="item.isInput_range" class="icon-Gm-delete-2" @click="item.isInput_range = false"></span>
              </div>
              <div v-if="item.field_type == 'date'">--</div>
            </div>
            <div class="dy-fx-2 plr-2">
              <hl-select :data="isWhether" v-model="item.is_required" type="primary" width=""></hl-select>
            </div>
            <div class="dy-fx-2 plr-2">
              <hl-select :data="isWhether" v-model="item.template_flag" type="primary" width=""></hl-select>
            </div>
            <div class="dy-fx-3 plr-2">
              <hl-select :data="templateList.systemColumns" v-model="item.template_types" type="primary" width="" :multiple="true" v-if="item.template_flag + '' == 'true'">
              </hl-select>
              <div v-if="item.template_flag + '' == 'false'">--</div>
            </div>
            <div class="dy-fx-2 plr-2 ellipsis-1">--</div>
            <div class="dy-fx-1 plr-2 ellipsis-1">启用</div>
            <div class="dy-fx-2 cost-css-w-2 plr-2 border-l">
              <a @click="isAddFlag = false,addItem = []">删除</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <button type="button" class="btn s-btn-default mt-10" @click="add">添加一行</button>
    <div class="hoverTexts" v-show="texthover" :style="{left:lefthover, top:tophover}" @mouseenter="texthover = true"
      @mouseleave="texthover = false">
      <div></div>
      <ul class="instro">{{textLong}}</ul>
    </div>
  </div>
</main>

<style media="screen">
  #contractCustom body {
    padding: 20px 0;
  }

  #contractCustom .global_table_title>div {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .iconHover {
    position: relative;
  }

  .iconHover:hover .hoverText {
    display: block;
  }

  .hoverText {
    display: none;
    position: absolute;
    z-index: 9999;
    left: -120px;
    width: 240px;
    flex-direction: column;
    padding-top: 12px;
    color: #999;
    line-height: 20px;
    top: 30px;
  }

  .hoverTexts {
    position: absolute;
    z-index: 9999;
    width: 240px;
    flex-direction: column;
    padding-top: 12px;
    color: #999;
    line-height: 20px;
  }

  .instro {
    width: 100%;
    padding: 8px 18px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 4px 2px rgba(200, 200, 200, .75);
  }


  .hoverText div,
  .hoverTexts div {
    position: absolute;
    display: inline-block;
    top: 7px;
    left: 120px;
    width: 0;
    height: 0px;
    content: '';
    border-style: solid;
    border-width: 6px;
    border-color: #fff #fff transparent transparent;
    transform: rotate(315deg);
    box-shadow: 2px -2px 2px #ccc;
    color: #999;
  }

  .css-overflow {
    overflow: visible
  }

  .ellipsis-2 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
</style>

<script src="modules/system_config/scripts/cms_zdy.js" charset="utf-8"></script>